﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent' v-loading = 'loading'>
      <!-- 检索部分 -->
      <div class = 'page_searchContent'>
        <el-input placeholder = "请输入模板名称进行检索" v-model = 'searchKey' prefix-icon = "el-icon-search" clearable></el-input>
      </div>
      <!-- 表格部分 -->
      <div class = 'page_tableContent'>
        <el-table :data = 'tableData' style = 'width:100%' stripe border>
          <el-table-column align = 'center' v-for = '(item) in tableColumn' :key = 'item.indexName' :label = 'item.text' show-overflow-tooltip
          :width = "item.indexName === 'is_lock' ? '120px' : 'auto'">
            <template slot-scope = 'scope'>
              <span v-if = "item.indexName === 'is_lock'">{{scope.row[item.indexName] ? '是' : '否'}}</span>
              <span v-else>{{scope.row[item.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column label = "操作" align = "center" width = '340'>
            <template slot-scope = "scope">
              <el-button type = 'text' @click = "handleSetting(scope.row)"><i class = 'iconfont icon-upload'></i>配置设定</el-button>
              <el-button type = 'text' @click = "handleEdit(scope.row)"><i class = 'iconfont icon-bianji'></i>编辑</el-button>
              <el-button v-show = "scope.row.is_lock" type="text" title="解锁" @click = "handleLockAndUnlock(scope.row, 'unlock')" >
                <i class="iconfont icon-mimajiesuo01"></i>解锁
              </el-button>
              <el-button v-show = "!scope.row.is_lock" type="text" title="" @click = "handleLockAndUnlock(scope.row, 'lock')">
                <i class="iconfont icon-lock"></i>锁定
              </el-button>
              <el-button type='text' @click = "preview(scope.row)"><i class = 'iconfont icon-yanj'></i>预览</el-button>
              <el-button type='text' @click = "handleDelete(scope.row)"><i class = 'iconfont icon-shanchu'></i>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class = 'page_bottomContent'>
        <div class = 'page_btnsContent'>
          <el-button type = "primary" @click = 'handleAdd ()'>新建模板</el-button>
        </div>
        <div class = 'page_paginationContent'>
          <el-pagination
            background
            @size-change = "handleSizeChange"
            @current-change = "handleCurrentChange"
            :current-page.sync = "currentPage"
            :page-size = 'pageSize'
            :pager-count = "5"
            :page-sizes = "[10, 25, 50, 100]"
            layout = "total, sizes, prev, pager, next"
            :total = 'totalLength'>
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑和添加页面的弹窗 -->
    <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width='40%' @close = "closeDialog">
      <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules = 'rules' v-loading = 'loading'>
        <el-form-item label = "名称：" prop = 'name'>
          <el-input v-model = 'ruleForm.name' placeholder = "请输入动态模板名称"></el-input>
        </el-form-item>
        <el-form-item label = "描述：">
          <el-input v-model = 'ruleForm.desc' placeholder = "请输入动态模板描述" type = 'textarea' autosize></el-input>
        </el-form-item>
        <el-form-item label = "类别：">
          <el-input v-model = 'ruleForm.category' placeholder = "请输入动态模板类别"></el-input>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
          <el-button type = "primary" @click = "submitForm ('ruleForm', operationType)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 动态模板的页面配置弹窗 -->
    <Template-Settings :propsInfo = 'propsInfo' @giveUpSetting = 'giveUpSetting' @sureSetting = 'sureSetting'></Template-Settings>
    <!-- 展示的弹窗 -->
    <el-dialog v-drag :title = 'previewTitle' :visible.sync = 'previewFormVisible' width='95%' class='main_dialog' append-to-body>
      <Show-Meta-Form-Layout :data = "previewPageData"></Show-Meta-Form-Layout>
      <!-- <Show-Workflow-Form-Layout v-if = "propsInfo && propsInfo.settingVisible && propsInfo.settingFrom === 'workflowSetting'" :data = "formData"></Show-Workflow-Form-Layout> -->
    </el-dialog>
  </div>
</template>

<script src='./dynamicMetaTemplate.js'></script>
